<template>
  <div class="studyBox">
    <!-- 试题部分 -->
    <div class="left">
      <div class="leftTop">
        <div v-for="(item, index) in studyAll" :key="index">
          <div class="studyItem">
            <div class="num" :class="{ showNum: item[6] == 'num1' }">
              <p v-show="!(item[6] == 'num1') || isShowResult">{{ item[0] }}</p>
            </div>
            <div class="ufunc">{{ item[1] }}</div>
            <div class="num" :class="{ showNum: item[6]  == 'num2' }">
              <p v-show="!(item[6]  == 'num2') || isShowResult">{{ item[2] }}</p>
            </div>
            <div class="getResult">=</div>
            <div class="num" :class="{ showNum: item[6] == 'num3' }">
              <p v-show="!(item[6] == 'num3') || isShowResult">{{ item[3] }}</p>
            </div>
            <div class="ufunc">{{ item[4] }}</div>
            <div class="num" :class="{ showNum: item[6] == 'num4' }">
              <p v-show="!(item[6] == 'num4') || isShowResult">{{ item[5] }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="leftBottom">
        <div class="desItem">
          <div class="lebel">时间</div>
          <div class="lebel">分数</div>
          <div class="lebel">用时</div>
        </div>
        <div class="desItem">
          <div class="lebel">时间</div>
          <div class="lebel">分数</div>
          <div class="lebel">用时</div>
        </div>
      </div>
    </div>
    <!-- 操作部分 -->
    <div class="right">
      <div class="rightItem">
        <el-button type="primary" @click="get50Arr">50 内乘除法</el-button>
        <el-button type="primary" @click="get100Arr">100 内乘除法</el-button>
        <el-button type="primary" @click="get200Arr">200 内乘除法</el-button>
      </div>
      <div class="rightItem">
        <el-button type="primary" @click="getStudyArr">试 题</el-button>
        <el-button type="success" @click="getResult">答 案</el-button>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ufuncArr1: ['x', '÷'], // 运算法则 乘除
      ufuncArr2: ['+', '-'], // 运算法则 加减
      studyAll: [], // 所有习题数组
      isShowResult: false, // 是否显示答案
      studyType: 50,
      isShowNum: 'num1'
    }
  },
  created() { },
  computed: {},
  mounted() {
    this.getStudyAll()
  },
  methods: {
    getStudyAll() {
      this.studyAll = []
      for (let i = 1; i <= 40; i++) {
        let studyItem = []
        // 随机得到 num2
        let num2 = Math.floor(Math.random() * 9 + 1) + 1
        studyItem[2] = num2
        // 随机得到 左侧运算规则
        let ufunc1 = ''
        let index1 = Math.floor(Math.random() * this.ufuncArr1.length)
        ufunc1 = this.ufuncArr1[index1]
        studyItem[1] = ufunc1
        // 根据 num2 和左侧运算规则 随机得到 num1
        let num1Max = Math.floor(this.studyType / num2)
        if (ufunc1 == 'x') {
          let num1 = Math.floor(Math.random() * (num1Max - 1) + 1) + 1
          studyItem[7] = num1 * num2
          studyItem[0] = num1
        } else if (ufunc1 == '÷') {
          let result = Math.floor(Math.random() * num1Max + 1)
          studyItem[7] = result
          studyItem[0] = result * num2
        }
        // 随机得到 右侧运算规则
        let ufunc2 = ''
        let index2 = Math.floor(Math.random() * this.ufuncArr2.length)
        ufunc2 = this.ufuncArr2[index2]
        studyItem[4] = ufunc2
        // 根据 studyItem[7] 和右侧运算规则 随机得到 num3
        let num3 = 0
        if (ufunc2 == '+') {
          num3 = Math.floor(Math.random() * (studyItem[7] - 1) + 1)
        } else if (ufunc2 == '-') {
          let jieguo = this.studyType - studyItem[7]
          num3 = Math.floor(Math.random() * jieguo + studyItem[7] + 1)
        }
        studyItem[3] = num3
        // 根据 studyItem[7] 和右侧运算规则 和num3 得到 num4
        let num4 = 0
        if (ufunc2 == '+') {
          num4 = studyItem[7] - num3
        } else if (ufunc2 == '-') {
          num4 = num3 - studyItem[7]
        }
        studyItem[5] = num4
        // 随机隐藏 num1、 num2、 num3 或者 num4 数字
        let noShowArr = ['num1', 'num2', 'num3', 'num4']
        let noShow = Math.floor(Math.random() * noShowArr.length)
        studyItem[6] = noShowArr[noShow]
        // 乘除法的位置 默认在等号的左侧
        let ccPosArr = ['before', 'after']
        let ccPos = Math.floor(Math.random() * ccPosArr.length)
        studyItem[8] = ccPosArr[ccPos]
        // studyItem 添加到所有的试题中
        if (studyItem[8] == 'after') {
          let beforeNums = studyItem.slice(3, 6)
          let afterNums = studyItem.slice(0, 3)
          let endResult = studyItem.slice(6)
          let pushResult = beforeNums.concat(afterNums).concat(endResult)
          this.studyAll.push(pushResult)
        } else {
          this.studyAll.push(studyItem)
        }
        // console.log('#########', this.studyAll)
      }
    },
    // 50 内加减法 点击事件
    get50Arr() {
      this.studyType = 50
      this.isShowResult = false
      this.getStudyAll()
    },
    // 100 内加减法 点击事件
    get100Arr() {
      this.studyType = 100
      this.isShowResult = false
      this.getStudyAll()
    },
    // 200 内加减法 点击事件
    get200Arr() {
      this.studyType = 200
      this.isShowResult = false
      this.getStudyAll()
    },
    // 试题 点击事件
    getStudyArr() {
      this.isShowResult = false
    },
    // 答案 点击事件
    getResult() {
      this.isShowResult = true
    }
  }
}
</script>

<style scoped>
.studyBox {
  display: flex;
}
.left {
  width: 1500px;
  height: 1050px;
  border: 1px solid #666;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 100px;
}
.leftTop {
  width: 100%;
  height: 90%;
  /* border: 1px solid green; */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.studyItem {
  width: 350px;
  height: 80px;
  border-bottom: 1px solid #aaa;
  /* border: 1px solid red; */
  display: flex;
  align-items: flex-end;
  font-size: 25px;
  text-align: center;
  line-height: 60px;
}
.num {
  width: 60px;
  height: 60px;
  /* border: 1px solid blue; */
}
.showNum {
  border: 1px solid #aaa;
  border-bottom: none;
}
.ufunc {
  width: 25px;
  height: 60px;
  /* border: 1px solid blue; */
  font-size: 33px;
  color: red;
}
.getResult {
  width: 25px;
  height: 60px;
  /* border: 1px solid blue; */
  font-size: 30px;
}
.resultNum {
  width: 70px;
  height: 60px;
  /* border: 1px solid blue; */
}
.leftBottom {
  width: 100%;
  height: 100px;
  /* border: 1px solid black; */
  font-size: 25px;
  line-height: 100px;
  display: flex;
  justify-content: space-around;
}
.desItem {
  width: 48%;
  height: 100px;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-around;
}
.desItem > .lebel {
  width: 32%;
  height: 100px;
}
.right {
  width: 500px;
  height: 500px;
  border: 1px solid green;
  text-align: center;
  margin-top: 100px;
  margin-left: 100px;
  font-size: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rightItem {
  width: 500px;
  height: 120px;
  /* border: 1px solid red; */
  line-height: 120px;
}
</style>
